<template>
  <div id="app">
    <el-card shadow="hover">

      <!--条件查询-->
      <el-form :inline="true" size="medium" :model="specification" class="demo-form-inline">
        <el-form-item >
          <el-input v-model="specification.specName" placeholder="规格名称"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" plain @click="conditionSearch" icon="el-icon-user">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" plain @click="openAddSpecification" icon="el-icon-plus">添加规格</el-button>
        </el-form-item>
      </el-form>
      <el-table
          :data="specificationList"
          style="width: 100%">
        <el-table-column
            label="规格ID"
            prop="id"
            align="center">
        </el-table-column>
        <el-table-column
            label="规格名称"
            align="center"
            prop="specName">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
                size="small"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页导航-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-card>
    <!--对话框-->
    <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="dialogFormVisible">

      <el-form :model="speciForm" ref="speciForm" :rules="rules" >
        <el-form-item :label="'规格名称'" :label-width="formLabelWidth" prop="specName">
          <el-input v-model="speciForm.specification.specName" autocomplete="off" ></el-input>
        </el-form-item>
        <div v-for="(item, index) in speciForm.specificationOptionList" v-if="index>=0" :key="index">
             <el-form-item :label="'选项名' + (index+1)"  :label-width="formLabelWidth" prop="optionName" >
               <el-input v-model="item.optionName"></el-input>
            </el-form-item>
            <el-form-item :label="'排序值' + (index+1)"  :label-width="formLabelWidth" prop="orders">
               <el-input v-model="item.orders"></el-input>
           </el-form-item>

           <el-form-item>
             <i class="el-icon-delete" @click="deleteItem(item, index)"></i>
           </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addItem">添加参数</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSpecification">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import specificationApi from "@/api/specification";
export default {
  data() {
    return {
      rules: {
          specName: [
          { required: true, message: '请输入规格名称', trigger: 'blur' }
          ],
        optionName: [
          { required: true, message: '请输入选项名', trigger: 'blur' }
        ],
        orders: [
          { required: true, message: '请输入排序值', trigger: 'blur' }
        ]
      },
      specification:{},
      speciForm:{
        specification:{},
        specificationOptionList:[]
      },
      specificationList:[],
      page:1,               // 当前页
      pageSize:5,           // 每页大小
      total:0,            // 总记录数
      title: '添加规格',
      dialogFormVisible: false,
      formLabelWidth: '80px'
    }
  },
  created() {
    this.conditionSearch()
  },
  methods: {
    // 批量修改参数相关接口
         // 添加一组key/value输入框
    addItem() {
       this.speciForm.specificationOptionList.push({
         optionName: '',
         orders: ''
       })
     },
     // 删除一组输入框
    deleteItem(item, index) {
      this.speciForm.specificationOptionList.splice(index, 1)
    },
    async conditionSearch() {
      const res = await specificationApi.search(this.page, this.pageSize, this.specification)
      this.specificationList = res.data.rows
      this.total = res.data.total
    },
    openAddSpecification(){
      this.speciForm.specification = {}
      this.speciForm.specificationOptionList = []
      this.dialogFormVisible = true
    },
    async addSpecification() {
      const res = await specificationApi.save(this.speciForm)
      if (res.data.code === 200) {
        this.$message.success(res.data.message)
        this.dialogFormVisible = false
        this.speciForm.specification = {}
        this.speciForm.specificationOptionList = []
        await this.conditionSearch()
      }else {
        this.$message.error("添加失败!")
      }
    },
    handleEdit(index, row) {
    },
    handleDelete(index, row) {
    },
    // 每页大小改变时事件
    handleSizeChange(val) {
      this.pageSize = val;
      this.conditionSearch()
    },
    // 当前页改变时事件
    handleCurrentChange(val) {
      this.page = val;
      this.conditionSearch()
    }
  }
}
</script>
<style>

</style>
